<script setup lang="ts">
import MenuList from './MenuList.vue'

defineProps<{
  active?: boolean,
  label?: string,
  items?: string[]
}>()

defineEmits<{
  (e: 'chooseItem', index: number): void
}>()
</script>

<template>
  <div class="btn-wrapper">
    <button class="menu-btn" :data-active=active>
      <slot>
        <span>{{ label || 'Type Button' }}</span>
      </slot>
    </button>

    <!--  维度选择弹窗  -->
    <MenuList :items @choose-item="$emit('chooseItem', $event)"/>
  </div>
</template>

<style scoped>
.btn-wrapper {
  position: relative;
  display: inline-block;
}

/* 鼠标悬停时显示维度弹窗 */
.btn-wrapper:hover .menu-list {
  display: flex;
  opacity: 1;
}

.menu-btn {
  height: 100%;
  position: relative;
  isolation: isolate;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--o1), var(--o2));
  color: var(--txt);
  font: 600 1rem/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  box-shadow: 0 10px 26px var(--glow);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.menu-btn::before {
  /* 外发光层 */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 166, 0, .22), transparent 70%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: -1;
}

.menu-btn:hover {
  z-index: 100;
  transform: translateY(-2px);
  /* 更亮、更强发光、加细环提示 */
  background: linear-gradient(180deg, #FFD46A, #FF9938);
  box-shadow: 0 12px 36px var(--glow), 0 0 0 2px rgba(255, 185, 100, .6) inset;
}

.menu-btn:hover::before {
  opacity: 1;
}

.menu-btn:active {
  transform: translateY(0);
  filter: saturate(1.05);
}

.menu-btn:focus {
  outline: none;
}

.menu-btn:focus-visible {
  box-shadow: 0 0 0 6px var(--ring), 0 10px 26px var(--glow);
}

.menu-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ===== 激活 / 未激活 ===== */

/* 激活（绿色） */
.menu-btn[data-active="true"] {
  background: linear-gradient(180deg, var(--g1), var(--g2));
  box-shadow: 0 12px 36px var(--gglow), 0 0 0 2px var(--gring) inset;
}

.menu-btn[data-active="true"]::before {
  opacity: 1;
}

.menu-btn[data-active="false"] {
  /* 轻微去饱和、弱阴影，仍可点击 */
  filter: saturate(.8);
  opacity: .92;
  box-shadow: 0 6px 16px rgba(255, 165, 0, .18);
}
</style>
